<template>
  <el-dialog v-model="openConfigDialog" :title="title" width="500px">
    <div class="w-full border-top">
      <el-row style="margin-bottom: 15px;">
        <el-col :span="6"><el-text style="line-height: 32px;">对象发送间隔：</el-text></el-col>
        <el-col :span="4"><el-input v-model="personMinInterval" /></el-col>
        <el-col class="text-center" :span="1" style="margin: 0 0.5rem;line-height: 32px;">-</el-col>
        <el-col :span="4"><el-input v-model="personMaxInterval" /></el-col>
        <el-col :span="1"><el-text style="margin: 0 0.5rem;line-height: 32px;">秒</el-text></el-col>
        <el-col :span="6"><el-button type="primary" style="margin: 0 1rem;line-height: 32px;"
            @click="setDefault">默认值</el-button></el-col>
      </el-row>
      <el-row style="">
        <el-col :span="6"><el-text style="line-height: 32px;">消息发送间隔：</el-text></el-col>
        <el-col :span="4"><el-input v-model="msgMinInterval" /></el-col>
        <el-col class="text-center" :span="1" style="margin: 0 0.5rem;line-height: 32px;">-</el-col>
        <el-col :span="4"><el-input v-model="msgMaxInterval" /></el-col>
        <el-col :span="1"><el-text style="margin: 0 0.5rem;line-height: 32px;">秒</el-text></el-col>
      </el-row>
    </div>
    <div class="w-full border-bottom">
      <el-row style="margin-bottom: 15px;">
        <el-col :span="3"><el-text style="line-height: 32px;">睡眠：</el-text></el-col>
        <el-col :span="2"><el-switch v-model="openSleep" /></el-col>
        <el-col :span="3"><el-text style="margin: 0 0.5rem;line-height: 32px;">开启</el-text></el-col>
      </el-row>
      <el-row style="margin-bottom: 15px;">
        <el-col :span="3"><el-text style="line-height: 32px;">开始：</el-text></el-col>
        <el-col :span="6"><el-time-select v-model="sleepStartTime" :max-time="sleepEndTime" class="mr-4" start="00:00"
            step="00:15" end="24:00" /></el-col>
        <el-col class="text-center" :span="1" style="margin: 0 0.5rem;line-height: 32px;">-</el-col>
        <el-col :span="3"><el-text style="line-height: 32px;">结束：</el-text></el-col>
        <el-col :span="6"><el-time-select v-model="sleepEndTime" :min-time="sleepStartTime" class="mr-4" start="00:00"
            step="00:15" end="24:00" /></el-col>
      </el-row>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="openConfigDialog = false">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import emitter from "@/utils/mitt-bus";
import { ElMessage } from 'element-plus';
import { mapState } from "vuex";
import { isNumber } from '@/utils/common';

export default {
  data() {
    return {
      openConfigDialog: false,
      title: '',
      personMinInterval: 0,
      personMaxInterval: 0,
      msgMinInterval: 0,
      msgMaxInterval: 0,
      openSleep: false,
      sleepStartTime: '',
      sleepEndTime: '',
    };
  },
  computed: {
  },
  mounted() {
    emitter.on("openConfigDialog", (type) => {
      this.openConfigDialog = true
      this.title = '发送配置'
      this.getConfig()
    });

  },
  methods: {
    getConfig() {
      const {
        personMinInterval, personMaxInterval,
        msgMinInterval, msgMaxInterval,
        openSleep, sleepStartTime, sleepEndTime
      } = this.$store.state.config;
      this.personMinInterval = personMinInterval
      this.personMaxInterval = personMaxInterval
      this.msgMinInterval = msgMinInterval
      this.msgMaxInterval = msgMaxInterval
      this.openSleep = openSleep
      this.sleepStartTime = sleepStartTime
      this.sleepEndTime = sleepEndTime
    },

    setDefault() {
      this.personMinInterval = 3
      this.personMaxInterval = 5
      this.msgMinInterval = 3
      this.msgMaxInterval = 5
    },

    save() {
      if (!this.verify()) {
        return
      }
      this.saveConfig()
      this.openConfigDialog = false
    },

    verify() {
      if (isNumber(this.personMinInterval) && this.personMinInterval >= 0 &&
        isNumber(this.personMaxInterval) && this.personMaxInterval >= 0 &&
        isNumber(this.msgMinInterval) && this.msgMinInterval >= 0 &&
        isNumber(this.msgMaxInterval) && this.msgMaxInterval >= 0) {
        return true;
      }

      ElMessage.error('数值设置有误')
      return false
    },

    saveConfig() {
      this.$store.commit('setSendConfig',
        {
          personMinInterval: this.personMinInterval,
          personMaxInterval: this.personMaxInterval,
          msgMinInterval: this.msgMinInterval,
          msgMaxInterval: this.msgMaxInterval,
          openSleep: this.openSleep,
          sleepStartTime: this.sleepStartTime,
          sleepEndTime: this.sleepEndTime,
        }
      )
    },
  }
};
</script>
<style>
.border-top {
  margin: 10px 0 20px;
  position: relative;
  border: 1px solid rgb(223, 215, 215);
  border-radius: 5px;
  padding: 15px;
}

.border-top::before {
  content: "发送间隔";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
}

.border-bottom {
  position: relative;
  border: 1px solid rgb(223, 215, 215);
  border-radius: 5px;
  padding: 15px;
}

.border-bottom::before {
  content: "休眠时间段设置";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
}
</style>
